<template>
  <div class="canvas-img">
    <img :src="config.imgurl" :style="imgStyle" :class="config.rotate?'animation':''"
         alt=""/>
  </div>
</template>

<script>
import {computed} from 'vue'

export default {
  name: 'ImgBox',
  props: {
    config: {
      type: Object
    },
    editor:{
      type:Object
    },
    id:{
      type:String
    }
  },
  setup(props){
    /**
     * 计算图片的动画属性
     * @type {ComputedRef<{"animation-timing-function": string, "animation-iteration-count": string, opacity: *}>}
     */
    const imgStyle = computed(()=>{
      let animationObj = {
        'animation-iteration-count': 'infinite',
        'animation-timing-function': 'cubic-bezier(0, 0, 1, 1)',
        'opacity': props.opacity
      }
      if (props.rotate) {
        animationObj['animation-duration'] = `${props.speed}s`
      }
      return animationObj
    })
    return {
      imgStyle
    }
  }
}
</script>

<style scoped>
.canvas-img, .canvas-img > img {
  width: 100%;
  height: 100%;

}

.canvas-img .animation {
  animation-name: rte;
}

@keyframes rte {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
